<template>
  <div id="supplierAppraiseDiv">
    <vxe-toolbar perfect>
      <template #buttons>
        <vxe-button
          type="text"
          class="button-blue"
          icon="vxe-icon-refresh"
          content="刷新"
          :loading="rloading"
          :disabled="isEmpty(supplierId)"
          @click="findSupplierAppraiseList"
        ></vxe-button>
        <vxe-button
          type="text"
          class="button-blue"
          icon="vxe-icon-square-plus"
          content="新增"
          :disabled="isEmpty(supplierId)"
          @click="addSupplierAppraise"
        ></vxe-button>
        <vxe-button
          type="text"
          class="button-blue"
          icon="vxe-icon-save"
          content="保存"
          :disabled="isEmpty(supplierId)"
          @click="saveSupplierAppraiseList"
        ></vxe-button>
        <vxe-button
          type="text"
          icon="vxe-icon-delete"
          class="button-red"
          content="删除"
          :disabled="isEmpty(supplierId)"
          @click="deleteSupplierAppraise"
        ></vxe-button>
      </template>
    </vxe-toolbar>

    <div class="tableBox">
      <vxe-table
        ref="supplierAppraiseTableRef"
        class="mytable-scrollbar"
        border="inner"
        align="center"
        height="auto"
        :row-config="{ isCurrent: true, isHover: true }"
        :data="appraiseList"
        :loading="rloading"
        :column-config="{ resizable: true }"
        :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
        resizable
        show-overflow
        keep-source
      >
        <vxe-column type="checkbox" width="30"></vxe-column>
        <vxe-column field="appraiseItem" title="评价项目" width="200" :edit-render="{}">
          <template #edit="{ row, rowIndex, column }">
            <vxe-input v-model="row.appraiseItem" placeholder="" type="text"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="appraiseContent" title="评价内容" :edit-render="{}">
          <template #edit="{ row, rowIndex, column }">
            <vxe-input v-model="row.appraiseContent" placeholder="" type="text"></vxe-input>
          </template>
        </vxe-column>

        <vxe-column field="seq" title="序号" width="150" :edit-render="{}">
          <template #edit="{ row, rowIndex, column }">
            <vxe-input v-model="row.seq" type="number"></vxe-input>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';
defineExpose({ initPage });
let supplierId = null;

let appraiseList: any = reactive([]);
let rloading = ref(false);

function initPage(row: any) {
  supplierId = row;
  findSupplierAppraiseList();
}

// 获取左侧仪器表格数据+刷新+右侧表格数据
function findSupplierAppraiseList() {
  rloading.value = true;
  appraiseList.length = 0; //放入数据前清空数据
  if (isEmpty(supplierId)) {
    rloading.value = false;
    return;
  }
  const url = '/lis/lab/supplierAppraise/findSupplierAppraiseList';
  proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: { supplierId: supplierId }
    })
    .then((res: any) => {
      appraiseList.push(...res.data);
      rloading.value = false;
    })
    .catch((err: any) => {
      rloading.value = false;
      VxeMessage('获取右侧质控项目表格数据异常', VxeNotifyType.error);
    });
}

function addSupplierAppraise() {
  if (isEmpty(supplierId)) {
    VxeMessage('请选择仪器', VxeNotifyType.error);
  } else {
    const record: any = {
      id: '',
      supplierId: supplierId,
      appraiseItem: '',
      appraiseContent: '',
      seq: 1,
      orgId: ''
    };
    appraiseList.push(record);
  }
}

// 左侧保存
async function saveSupplierAppraiseList() {
  if (isEmpty(supplierId)) {
    VxeMessage('请选择仪器', VxeNotifyType.error);
  } else {
    let $Xtable = proxy.$refs.supplierAppraiseTableRef;
    if ($Xtable) {
      // 表格实例表用该方法拿到有id的为修改
      const updateRecords = await $Xtable.getUpdateRecords().filter((p: any) => {
        return p.id && p.id !== '';
      });
      // 拿到数组中没有id的数据为新增
      const InsertRecords = appraiseList.filter((e: any) => {
        return !e.id || e.id === '';
      });

      const sveOrupdateAppraises = [] as any[];
      updateRecords.forEach((e: any) => {
        const iIAppraise: any = {
          id: e.id,
          supplierId: e.supplierId,
          appraiseItem: e.appraiseItem,
          appraiseContent: e.appraiseContent,
          seq: e.seq,
          orgId: e.orgId
        };

        sveOrupdateAppraises.push(iIAppraise);
      });
      InsertRecords.forEach((e: any) => {
        const iIAppraise: any = {
          id: e.id,
          supplierId: e.supplierId,
          appraiseItem: e.appraiseItem,
          appraiseContent: e.appraiseContent,
          seq: e.seq,
          orgId: e.orgId
        };
        sveOrupdateAppraises.push(iIAppraise);
      });

      if (sveOrupdateAppraises.length > 0) {
        const url = '/lis/lab/supplierAppraise/saveOrUpdateSupplierAppraise';
        const obj: any = {};
        obj.appraiseList = sveOrupdateAppraises;
        proxy.$http
          .post(url, obj)
          .then((res: any) => {
            VxeMessage('更新成功', VxeNotifyType.success);
            setTimeout(() => {
              findSupplierAppraiseList();
            }, 500);
          })
          .catch((err: any) => {
            VxeMessage('更新失败', VxeNotifyType.success);
          });
      } else {
        VxeMessage('无添加或修改数据', VxeNotifyType.error);
      }
    } else {
      return;
    }
  }
}
// 左侧删除
function deleteSupplierAppraise() {
  const sltAppraises = (proxy.$refs.supplierAppraiseTableRef as any).getCheckboxRecords();
  if (!(sltAppraises.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(async () => {
        //后台删除数据
        const delAppraiseList = sltAppraises.filter((p: any) => !isEmpty(p.id));
        if (delAppraiseList.length > 0) {
          const data = { appraiseList: delAppraiseList };
          const url = '/lis/lab/supplierAppraise/batchDeleteSupplierAppraiseList';
          proxy.$http
            .post(url, data)
            .then((res: any) => {
              findSupplierAppraiseList(); // 获取检验仪器表格数据
              VxeMessage(res.status.msg, VxeNotifyType.success);
            })
            .catch((err: any) => {
              VxeMessage(err, VxeNotifyType.error);
            });
        }
        //页面删除未保存的数据
        const removeAppraiseList = sltAppraises.filter((p: any) => isEmpty(p.id));
        if (removeAppraiseList.length > 0) {
          // 删除的新增的空白数据 不走接口
          let $Xtable = proxy.$refs.supplierAppraiseTableRef;
          if ($Xtable) {
            for (const removeRow of removeAppraiseList) {
              appraiseList.splice(removeRow.seq - 1);
            }
          }
        }
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}
</script>

<style lang="scss" scoped>
#supplierAppraiseDiv {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  //右侧质控项目表格
  .tableBox {
    height: calc(100% - 40px);
    background-color: $base-white;
  }
}
</style>
